<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <title>类别列表管理</title>
    <!-- JQuery -->
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <!-- Bootstrap核心CSS和JS -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- 自定义JS -->
    <script type="text/javascript">
        $(function () {
            search();
            $("#search").click(function () {
                search();
            });

            $("#reset").click(function () {
                $("#nameKey").val("");
                search();
            });

            $("#upon").click(function () {
                search(pageNow - 1);
            });


            $("#next").click(function () {
                search(pageNow + 1);
            });

            $("#start").click(function () {
                search(1);
            });

            $("#last").click(function () {
                search(pageAll);
            });
        });

        var pageNow = 1;
        var pageAll = 1;

        function search(page, size) {
            $("#searchVar").html("");
            $.getJSON(
                "/admin/category/doSearch",
                {name: $("#nameKey").val(), pageIndex: page, pageSize: size},
                function (json) {
                    if (json.statusCode !== 200) {
                        $("#searchVar").html("没有找到相关内容 " + json.msg);
                    }

                    $("#sumRows").html(json.data.total);
                    pageNow = json.data.pageNum;
                    $("#pageNum").html(pageNow);
                    pageAll = json.data.pages;
                    $("#pages").html(pageAll);

                    $("#upon").attr('disabled', json.data.isFirstPage);
                    $("#next").attr('disabled', json.data.isLastPage);

                    for (let i = 0; i < json.data.list.length; i++) {
                        let category = json.data.list[i];
                        $("#searchVar").append(`
                        <tr>
                        <td>${category.id}</td>
                        <td>${category.name}</td>
                        <td>${category.goodsNum}</td>
                        <td><a href="javascript:delCategory(${category.id})" >删除</a>&nbsp;
                        <a href="/admin/category/edit/${category.id}" >编辑</a></td>
                        </tr>
                        `);
                    }
                },
                "json"
            );
        }

        function delCategory(CategoryID) {
            if (!confirm("确定要删除吗？"))
                return false;
            $.post(
                "/admin/category/del/" + CategoryID,
                {},
                function (json) {
                    if (json.statusCode !== 200) {
                        alert("删除失败 " + json.msg);
                        return false;
                    }
                    alert("删除成功");

                    search(pageNow);
                },
                "json"
            ).fail(function () {
                alert("网络错误!");
            });
        }
    </script>
</head>
<body>
<h1 class="page-header">商品类别</h1>
<span>搜索：</span>
<label for="nameKey" class="form-inline">
    <input type="text" id="nameKey" class="form-control">&nbsp;&nbsp;
</label>
<button id="search" class="btn btn-primary">
    <span class="glyphicon glyphicon-search"></span> 搜索
</button>&nbsp;
<button id="reset" class="btn btn-danger">
    <span class="glyphicon glyphicon-repeat"></span> 恢复
</button>&nbsp;
共找到<span id="sumRows" style="color: crimson"></span>条数据&nbsp;
<a href="/admin/category/add">
    <button class="btn btn-info">
        <span class="glyphicon glyphicon-plus"></span> 添加
    </button>
</a>
<div class="table-responsive">
    <table id="listCustomer" class="table table-striped">
        <thead>
        <th>ID</th>
        <th>类别名称</th>
        <th>类别商品数量</th>
        <th>操作</th>
        </thead>
        <tbody id="searchVar">
        <!-- 预留数据 -->


        </tbody>
        <tfoot>
        <!-- 尾部数据 -->
        <tr></tr>
        </tfoot>
    </table>
</div>
<div class="icon-align-center">
    <a href="#" id="start">首页</a>
    <button id="upon">上一页</button>&nbsp;
    第<span id="pageNum" style="color: #142fdc"></span>页&nbsp;
    <button id="next">下一页</button>&nbsp;
    共<span id="pages"></span>页&nbsp;
    <a href="#" id="last">末页</a>
</div>
</body>
</html>